<template>
    <fieldset>
        <legend>{{isLogin?"内容界面":"登录界面"}}</legend>
       
        <!-- 内容展示界面 -->
        <div class="content" v-if="isLogin">
            <h1>列表展示</h1>
            <button @click="isLogin=false">点击退出登录</button>
            <!-- <button @click="getList">点击获取列表数据</button> -->
            <h2>
                <img :src="userInfo.headimgurl" width="50" alt="">
                昵称:
                <a href="">{{userInfo.nickname}}</a>
            </h2>
            <ul>
                <li v-for="item in lists" :key="item._id">
                   <b>{{item.name}}</b>
                    <button v-has:read="permissionBtns">查看</button>
                    <button v-has:edit="permissionBtns">修改</button>
                    <button v-has:delete="permissionBtns">删除</button>
                    <button v-has:add="permissionBtns">增加</button>
                </li>
            </ul>
        </div>

        <div class="login" v-else> 
            <h1>请登录</h1>
            <label for="username">用户名：</label>
            <input type="text" id="username" v-model="username">
            <br>
            <label for="password">密码：</label>
            <input type="text" v-model="password" @keydown.enter="login">
            <br>
            <button @click="login">登入</button>
        </div>

    </fieldset>
</template>
<script>
//接口地址
//登入接口：http://chst.vip/users/login
//请求方式：post
//参数：username password
//请求头：application/json


//封装一个登录的请求方法
const loginApi = (parans={})=>{//parans用来接收用户传入的用户名和密码，再将转换成字符串
    return fetch('http://chst.vip/users/login',{
        method:'post',//请求方式
        headers:{'content-type':'application/json'},//请求头
        body:JSON.stringify(parans)//携带的参数，传给服务器的参数
    })
       .then(body=>body.json())//得到的响应体
       .catch(err=>err.toString())//出错转换成字符串
}//整个fetch返回的是一个promises

//封装一个获取列表的请求
const getListApi = ()=>{
    return fetch('http://chst.vip/students/getstulist?count=10',{
        method:'get',
        headers:{'authorization':sessionStorage.getItem('user-token')}
    })
    .then(body=>body.json())
    .catch(err=>err.toString())
}

    export default{
        methods:{
            //登录
           async login(){
               let res = await loginApi({username:this.username,password:this.password})
               console.log(res)
               if(res.state){
                    this.isLogin = true //显示
                    this.userInfo = res.userInfo
                    console.log(this.userInfo);
                    sessionStorage.setItem('user-token',res.token)
                    this.permissionBtns = res.permission.buttons
                    console.log(res.permission)
                    this.getList()//直接调用获取列表

               }else{
                    alert(res.msg)
               }
            },
            //获取列表
            async getList(){
                let res = await getListApi()
                if(res.state){//判断是否请求成功
                    this.lists = res.data
                }else{
                    alert('获取数据失败')
                }
                 
            }
        },
        data(){
            return{
                userInfor:{},//用户信息
                username:'',
                password:'',
                isLogin:false,//是否登录状态
                lists:[],
                permissionBtns:[]
            }
        }
    }
</script>
<style scoped>
    ul{
        padding: 0;
        margin: 0;
        list-style: none;

    }
    li{
        /* border: 1px solid pink; */
        margin: 10px;
        max-width: 500px;
    }
</style>